<template>
	<view class="container">
		<view class="top">
			<view class="item">
				<navigator url="../pay_collections/pay_collections">
					<view>
						<image src="../../static/icon/shoufukuan.png" mode=""></image>
					</view>
					<view>
						收付款
					</view>
				</navigator>
			</view>	
			<view class="item">
				<view>
					<image src="../../static/icon/qianbao.png" mode=""></image>
				</view>
				<view>
					钱包
				</view>
				<view class="balance">
					￥{{balance | MoneyFormat}}
				</view>
			</view>
		</view>
		
		<view class="middle">
			<view class="title">
				常用功能
			</view>
			<uni-grid :column="4" :showBorder="false">
			    <uni-grid-item>
					<navigator url="../bind-card/bind-card">
						<image src="../../static/icon/bangka.png"></image>
						<text class="text">绑定银行卡</text>
					</navigator>
			    </uni-grid-item>
			    <uni-grid-item>
					<navigator url="../recharge/recharge">
						<image src="../../static/icon/chongzhi.png"></image>
						<text class="text">充值</text>
					</navigator>
			    </uni-grid-item>
			    <uni-grid-item>
					<navigator url="../cash/cash">
						<image src="../../static/icon/tixian.png"></image>
						<text class="text">提现</text>
					</navigator>
			    </uni-grid-item>
				<uni-grid-item>
					<navigator url="../select_payment/select_payment">
						<image src="../../static/icon/fukuan.png"></image>
						<text class="text">选择商户付款</text>
					</navigator>
				</uni-grid-item>
				<uni-grid-item>
					<navigator url="../payment/payment">
						<image src="../../static/icon/saoma.png"></image>
						<text class="text">扫码付款</text>
					</navigator>
				</uni-grid-item>
				<uni-grid-item>
					<navigator url="../pay_nfc/pay_nfc">
						<image src="../../static/icon/nfc.png"></image>
						<text class="text">NFC支付</text>
					</navigator>
				</uni-grid-item>				
				<uni-grid-item>
					<navigator url="../wallet_transfer/wallet_transfer">
						<image src="../../static/icon/zhuanzhang.png"></image>
						<text class="text">钱包转账</text>
					</navigator>
				</uni-grid-item>
				<uni-grid-item>
					<navigator url="../history/history" open-type="switchTab">
						<image src="../../static/icon/jiaoyijilu.png"></image>
						<text class="text">交易记录</text>
					</navigator>
				</uni-grid-item>				
				<uni-grid-item>
					<navigator url="../make-collections/make-collections">
						<image src="../../static/icon/hongbao.png"></image>
						<text class="text">收钱</text>
					</navigator>
				</uni-grid-item>
				<uni-grid-item>
					<image src="../../static/icon/fenxi.png"></image>
				    <text class="text">消费分析</text>
				</uni-grid-item>
				<uni-grid-item>
					<image src="../../static/icon/jifen.png"></image>
				    <text class="text">积分奖励</text>
				</uni-grid-item>
			</uni-grid>
		</view>
						
		<view class="middle">
			<view class="title">
				工具设置
			</view>
			<uni-grid :column="4" :showBorder="false">
				<navigator url="../pay_pwd/pay_pwd">
					<uni-grid-item>
						<image src="../../static/icon/mima.png"></image>
						<text class="text">支付密码</text>
					</uni-grid-item>
				</navigator>
				<navigator url="../pay-limit/pay-limit">
					<uni-grid-item>
						<image src="../../static/icon/xiane.png"></image>
						<text class="text">支付限额</text>
					</uni-grid-item>
				</navigator>
			    <uni-grid-item>
					<image src="../../static/icon/yue.png"></image>
			        <text class="text">余额提醒</text>
			    </uni-grid-item>
				<navigator url="../security/security">
					<uni-grid-item>
						<image src="../../static/icon/anquan.png"></image>
						<text class="text">安全设置</text>
					</uni-grid-item>
				</navigator>
				<uni-grid-item>
					<navigator url="../index/index">
						<image src="../../static/icon/yonghu.png"></image>
						<text class="text">切换用户</text>
					</navigator>
				</uni-grid-item>
			</uni-grid>
		</view>		
	</view>
</template>

<script>
	import Global from '../../common/global.js'
	
	export default {
		data() {
			return {
				balance:'',
				payLimit:'',
				customerNumber:''
			}
		},
		methods: {
			//查询当前客户余额
			getBalance(){
				uni.request({
					url: Global.BASE_URL + '/ewallet/queryBalance',
					header:{
						'content-type': 'application/x-www-form-urlencoded'
					},
					data:{
						customerNumber:this.customerNumber
					},
					method:'POST',
					success:(res)=>{ //注意使用箭头函数						
						this.balance = res.data;											
						console.log(res)					
					},
					fail(err) {
						uni.showToast({
							title:'查询钱包余额接口调用失败',	
							icon:'none'
						})
					},
					complete() {
						uni.stopPullDownRefresh();
					}
				})				
			},
			//查询当前用户的支付限额
			getPayLimit(){
				uni.request({
					url: Global.BASE_URL + '/ewallet/queryPayLimit',
					header:{
						'content-type': 'application/x-www-form-urlencoded'
					},
					data:{
						customerNumber:this.customerNumber
					},
					method:'POST',
					success:(res)=>{ //注意使用箭头函数	
						//存储选择的当前用户编号
						uni.setStorageSync("payLimit",res.data)										
						console.log(res)					
					},
					fail(err) {
						uni.showToast({
							title:'查询钱包支付限额接口调用失败',	
							icon:'none'
						})
					}
				})				
			}
		},
		onLoad() {
			
		},
		onShow() {
			//读取出客户编号
			this.customerNumber = uni.getStorageSync('customerNumber')
			//读取支付限额
			this.getPayLimit()
			//查询余额
			this.getBalance()
		},
		onPullDownRefresh() {
			//查询余额
			this.getBalance()
		}
	}
</script>	

<style>
	
	page {
		background: #EDEDED;
	}
	
	.container {
		padding: 15rpx;
	}
	
	.top {
		display: flex;
		justify-content: space-between;
		width: 720rpx;
		height: 300rpx;
		background: #2AAD69;
		border-radius: 25rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		margin-bottom: 30rpx;
	}
	
	.top .item {		
		display: flex;
		flex-direction:column;
		padding-top: 70rpx;
		text-align: center;
		margin: 0 15rpx;
		width: 330rpx;
	}
	
	.top .item image {
		width: 100rpx;
		height: 100rpx;
	}
	
	.middle {
		padding: 30rpx;
		margin-bottom: 30rpx;
		background-color: #FFFFFF;
		border-radius: 25rpx;
		box-sizing: border-box;
		font-size: 26rpx;		
	}
	
	.middle .title {
		font-weight: bold;
		color: #333333;
	}
	
	.middle image {
		display: block;
		width: 80rpx;
		height: 80rpx;
		margin: 10rpx auto;
	}
	
	.middle .uni-grid-item {
		display: flex;
		align-items:center;
		justify-content:center;
		text-align: center;		
	}
	
</style>